<template>
  <div class="shadow-card rounded-2xl bg-white p-5">
    <h3 class="mb-5 flex items-center text-lg font-semibold">
      <i class="fa fa-tasks text-primary mr-2"></i> 任务队列信息
    </h3>

    <div class="space-y-4">
      <div class="flex items-center justify-between border-b border-gray-100 pb-3">
        <span class="text-gray-600">总任务数</span>
        <span class="font-medium">{{ queueStatus.queueTaskNum }} </span>
      </div>
      <div class="flex items-center justify-between border-b border-gray-100 pb-3">
        <span class="text-gray-600">并发数量</span>
        <span class="text-primary font-medium">{{ queueStatus.concurrency }} </span>
      </div>
      <div class="flex items-center justify-between border-b border-gray-100 pb-3">
        <span class="text-gray-600">已暂停任务</span>
        <span class="text-warning font-medium">{{ queueStatus.pausedTaskNum }} </span>
      </div>
      <div class="flex items-center justify-between border-b border-gray-100 pb-3">
        <span class="text-gray-600">等待中任务</span>
        <span class="font-medium text-gray-500">{{ queueStatus.waitingTaskNum }} </span>
      </div>
      <div class="flex items-center justify-between border-b border-gray-100 pb-3">
        <span class="text-gray-600">已完成任务</span>
        <span class="text-secondary font-medium"> {{ queueStatus.completedTaskNum }} </span>
      </div>
      <div class="flex items-center justify-between border-b border-gray-100 pb-3">
        <span class="text-gray-600">失败任务</span>
        <span class="text-danger font-medium">{{ queueStatus.failedTaskNum }} </span>
      </div>
      <div class="flex items-center justify-between">
        <span class="text-gray-600">分片大小</span>
        <span class="font-medium">{{ formatFileSize(chunkSize) }}</span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
  queueStatus: {
    type: Object,
    default: () => ({
      queueFileNum: 0, // 文件数
      queueTaskNum: 0, // 队列任务数

      runningNum: 0, // 当前并发池任务数
      concurrency: 0, // 并发请求数
      pausedFileNum: 0, // 已暂停文件数
      pausedTaskNum: 0, // 已暂停任务数
      waitingFileNum: 0, // 等待中文件数
      waitingTaskNum: 0, // 等待中任务数
      completedFileNum: 0, // 已完成文件数
      completedTaskNum: 0, // 已完成任务数
      failedFileNum: 0, // 失败文件数
      failedTaskNum: 0, // 失败任务数
      chunkSize: 0, // 分片大小
    }),
  },
  formatFileSize: {
    type: Function,
    default: (size: number) => {},
  },
  totalSize: {
    type: Number,
    default: 0,
  },
  chunkSize: {
    type: Number,
    default: 0,
  },
})
</script>
